<template>
  <div class="jianzhimao_bank_box">
    <!-- 兼职猫填写身份证银行卡弹窗 -->
    <van-popup v-model="show" position="bottom" :style="{ height: '60%' }" @close="closePopup">
      <div class="bandBox">
        <h2>请完善资料<i class="iconfont icon-close11" @click="show = false"></i></h2>
        <template v-if="bank_card_status">
          <div class="rule">
            <div class="ruleLeft">*开户行:</div>
            <div class="ruleRighe">
              <van-field v-model="bankdata.bank_name" placeholder="请输入开户行" />
            </div>
          </div>
          <div class="rule" @click="addressShowProvince">
            <div class="ruleLeftDist">*所在省:</div>
            <div class="rightDist">
              <span>{{ bankdata.bank_province }}</span>
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="rule" @click="addressShowCity">
            <div class="ruleLeftDist">*所在市:</div>
            <div class="rightDist">
              <span>{{ bankdata.bank_city }}</span>
              <van-icon name="arrow" />
            </div>
          </div>
          <div class="rule">
            <div class="ruleLeft">*支行名称:</div>
            <div class="ruleRighe">
              <van-field v-model="bankdata.bank_branch" placeholder="请输入支行名称" />
            </div>
          </div>
          <div class="rule">
            <div class="ruleLeft">*卡号:</div>
            <div class="ruleRighe">
              <van-field v-model="bankdata.bank_card" placeholder="请输入您的卡号" />
            </div>
          </div>
        </template>
        <template v-for="(item, index) in set_verify">
          <div class="rule" :key="index" v-if="!item.status || item.value">
            <div class="ruleLeft red">*{{ item.title }}:</div>
            <div class="ruleRighe">
              <van-field v-model="form[item.name]" :placeholder="`请输入您的${item.title}`" />
            </div>
          </div>
        </template>
        <div class="bandSave" @click="bindCard">保存</div>
      </div>
    </van-popup>
    <van-popup v-model="addressShow_p" position="bottom" :style="{ height: '45%' }">
      <van-picker title="" show-toolbar :columns="provinceData" @confirm="addressCallback" @cancel="onCancel" value-key="areaname" />
    </van-popup>
    <van-popup v-model="addressShow_c" position="bottom" :style="{ height: '45%' }">
      <van-picker title="" show-toolbar :columns="showCityData" @confirm="addressCallback_c" @cancel="onCancel" value-key="areaname" />
    </van-popup>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  model: {
    prop: "show",
    event: "onEmit"
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    set_verify: {
      type: null
    },
    bank_card_status: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    set_verify: function(nval, oval) {
      if (nval.length > 0) {
        nval.forEach((ele, ind) => {
          if (ele.value) {
            this.form[ele.name] = ele.value;
          }
        });
      }
    }
  },
  data() {
    return {
      form: [],
      bankdata: {
        bank_card: "",
        bank_name: "",
        bank_province: "",
        bank_city: "",
        bank_branch: ""
      },
      // 省市区选择弹窗
      addressShow_p: false,
      district: district, // 地址本地数据
      provinceData: [],
      cityData: [],
      showCityData: [],
      ProvinceId: "",
      addressShow_c: false
    };
  },
  methods: {
    closePopup() {
      this.$emit("closePopup");
    },
    bindCard() {
      // console.log(this.realname, this.idcard, this.idcard_addr, this.bankdata, this.form);
      let json = {};
      if (this.bank_card_status) {
        json.bank = {};
        json.bank.bank_card = this.bankdata.bank_card;
        json.bank.bank_name = this.bankdata.bank_name;
        json.bank.bank_province = this.bankdata.bank_province;
        json.bank.bank_city = this.bankdata.bank_city;
        json.bank.bank_branch = this.bankdata.bank_branch;
        json.bank.type = 1;
        if (!this.bankdata.bank_card) {
          this.$toast("请输入卡号");
          return;
        } else if (!this.bankdata.bank_name) {
          this.$toast("请输入开户行");
          return;
        } else if (!this.bankdata.bank_province) {
          this.$toast("请选择所在省");
          return;
        } else if (!this.bankdata.bank_city) {
          this.$toast("请选择所在市");
          return;
        } else if (!this.bankdata.bank_branch) {
          this.$toast("请输入支行名称");
          return;
        }
      }
      for (let i = 0; i < this.set_verify.length; i++) {
        if (!this.set_verify[i].status) {
          json[this.set_verify[i].name] = this.form[this.set_verify[i].name];
          if (!this.form[this.set_verify[i].name]) {
            this.$toast(this.set_verify[i].tips);
            return;
          }
        }
      }
      $http.post("plugin.jianzhimao-withdraw.frontend.member-info.set", json, "").then(
        response => {
          if (response.result == 1) {
            this.$emit("closePopup");
          } else {
            this.$toast(response.msg);
          }
        },
        response => {
          that.$dialog.alert({ message: response.msg });
        }
      );
    },
    addressShowProvince() {
      if (this.provinceData.length > 0) {
        this.addressShow_p = true;
      } else {
        $http.post("member.member-address.address", "").then(
          response => {
            if (response.result == 1) {
              this.provinceData = response.data.province;
              this.cityData = response.data.city;
              this.addressShow_p = true;
            }
          },
          response => {
            that.$dialog.alert({ message: response.msg });
          }
        );
      }
    },
    addressShowCity() {
      if (!this.ProvinceId) {
        Toast("请先选择省");
        return;
      }
      this.addressShow_c = true;
      for (let i = 0; i < this.cityData.length; i++) {
        if (this.cityData[i].parentid == this.ProvinceId) {
          this.showCityData = this.showCityData.concat(this.cityData[i]);
        }
      }
    },
    addressCallback(e) {
      this.bankdata.bank_province = e.areaname;
      this.ProvinceId = e.id;
      this.showCityData = [];
      this.bankdata.bank_city = "";
      this.addressShow_p = false;
    },
    addressCallback_c(e) {
      this.bankdata.bank_city = e.areaname;
      this.addressShow_p = false;
      this.addressShow_c = false;
    },
    onCancel(e) {
      this.addressShow_p = false;
      this.addressShow_c = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.formBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.625rem 1rem;
  .title {
    flex-shrink: 0;
  }
}
// 提现到银行卡
.bandBox {
  .bandSave {
    width: 20rem;
    height: 2.5rem;
    background-color: #f96d20;
    border-radius: 1.25rem;
    font-size: 0.94rem;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-top: 2rem;
  }
  
  .rule {
    display: flex;
    align-items: center;
    padding: 0 0.94rem;
    margin-bottom: 1.38rem;
    .ruleLeftDist {
      display: flex;
      align-items: center;
      font-size: 0.94rem;
    }
    .rightDist {
      height: 22px;
      flex: 1;
      display: flex;
      justify-content: flex-end;
      font-size: 0.94rem;
      align-items: center;
      span {
        margin-right: 0.39rem;
      }
      i {
        margin-top: 3px;
      }
    }
    .ruleRighe {
      flex: 1;
      ::-webkit-input-placeholder {
        /* placeholder字体大小 */
        font-size: 0.94rem;
      }
      .van-cell {
        padding-top: 0;
        padding-bottom: 0;
      }
    }
    .ruleLeft {
      display: flex;
      align-items: center;
      font-size: 0.94rem;
      margin-top: -5px;
    }
    .red{
      color: red;
    }
  }
  h2 {
    margin-bottom: 2rem;
    background: #fff;
    line-height: 2.875rem;
    font-size: 16px;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1;
    // border-bottom: solid 0.0625rem #ebebeb;

    .icon-close11 {
      width: 3rem;
      display: inline-block;
      position: absolute;
      right: 0;
      font-size: 1rem;
      color: #666;
    }
  }
}
</style>
